<!-- 订单统计 -->
<template>
    <div >
        <div class='table-page-search-wrapper'>
            <a-row :gutter="16">
                <a-col :span="6">
                    <a-card title="今日订单总数" :bordered="false">
                        <p>{{dayOrderCount}}笔</p>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card title="今日订单金额" :bordered="false">
                    <p>{{dayOrderAmount}}元</p>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card title="上月订单总数" :bordered="false">
                    <p>{{lastMonthOrderCount}}笔</p>
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card title="上月订单金额" :bordered="false">
                    <p>{{lastMonthOrderAmount}}元</p>
                    </a-card>
                </a-col>
            </a-row>
        </div>  
        <a-card title="订单统计" style="margin-top: 40px">
            <div class="echartsuser">
                <div id="echarts"></div>
            </div>
        </a-card>
        <a-card title="销售额统计" style="margin-top: 40px">
            <div class="echartsuser">
                <div id="echartsAmount"></div>
            </div>
        </a-card>
    </div>
</template>

<script>
import { queryOrderFormDailyStat , queryTransactionType } from '@/api/order';
import { formatTime } from '@/utils/util';
import moment from 'moment';
export default {
    data () {
        return {
            dayOrderCount: 0, // 今日订单总数
            dayOrderAmount: 0, // 今日订单金额
            lastMonthOrderCount: 0, // 上月订单总数
            lastMonthOrderAmount: 0, // 上月订单金额
            orderType : '20,21'
        };
    },
    async created(){
        try {
            await this.getType();
            this.getNowDayOrder();
            this.getLastMonthOrder();
            this.setEacharts(7,new Date(),'0')
            this.setEacharts(7,new Date(),'1')
        } catch (error) {
            _this.$notification['error']({
                message: '提示',
                description: error,
                duration: 8,
            })
        }
    },
    methods: {
        // 查询订单类型
        getType(){
            let _this = this
            return new Promise((resolve,reject) => {
                const params = {}
                queryTransactionType(params)
                .then(res=>{
                    if(res.success){
                        _this.orderTypeList = res.data
                        resolve();
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        // 获取订单金额统计
        getOrderData({orderType,accountType = '0',gtDate,ltDate,channelTag}){
            let _this = this;
            return new Promise((resolve,reject) => {
                queryOrderFormDailyStat({
                    'orderType': orderType, // 订单类型，可传多个
                    'accountType': accountType, // 账户类型，0：CNY,5:积分
                    'gtDate': gtDate, // 大于等于的日期
                    'ltDate': ltDate, // 小于等于的日期
                    'channelTag': channelTag, // 通道标识
                })
                .then(res => {
                    if(res.success){
                        resolve(res.data);
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        // 获取今日订单数据
        async getNowDayOrder(){
            let _this = this;
            const gtDate = formatTime(new Date(),)
            try {
                var data = await _this.getOrderData({orderType: _this.orderType,gtDate: gtDate,ltDate: gtDate});
                console.log(data,'data');
                _this.dayOrderCount = data.count;
                _this.dayOrderAmount = data.amount;
            } catch (error) {
                _this.$notification['error']({
                    message: '提示',
                    description: error,
                    duration: 8,
                })
            }
        },
        // 获取上月订单数据
        async getLastMonthOrder(){
            let _this = this;
            var lastDate = (new Date().getTime() - (new Date().getDate() * 24 * 3600 * 1000));
            const ltDate = formatTime(lastDate);
            const gtDate = `${ltDate.substring(0,8)}01`;
            try {
                var data = await _this.getOrderData({orderType: _this.orderType,gtDate: gtDate,ltDate: ltDate});
                console.log(data,'data');
                _this.lastMonthOrderCount = data.count;
                _this.lastMonthOrderAmount = data.amount;
            } catch (error) {
                _this.$notification['error']({
                    message: '提示',
                    description: error,
                    duration: 8,
                })
            }
        },
        // 订单统计表格
        async setEacharts(day,date,type){
            let _this = this;
            _this.isLoading = true;
            let dateList = []; // 日期列表
            let dataList = [
                { name: type == '0' ? '订单数量统计'  : '销售额统计', id: 7, data: Array(day), type: 'line',stack: 'Total',},
            ]; // 数据列表
            for(let i = day; i >= 1; i --){
                dateList.push(moment(date).subtract(i, 'days').format('YYYY-MM-DD'))
            }
            try{
                for(let index = 0; index < dataList.length; index++){
                    for(let i = 0 ; i< dateList.length; i++){
                        var data = 0;
                        var data = await _this.getOrderData({orderType: '20,21',gtDate: dateList[i],ltDate: dateList[i]});
                        if(type == '0'){
                            dataList[index].data[i] = data.count;
                        }else{
                            dataList[index].data[i] = data.amount;
                        }
                        console.log(data,'循环里面的dataList')
                    }
                }
                var datas = dataList.map(item=>{
                    return item.name;
                })
                var echarts = this.$echarts.init(
                    type == '0' ? document.getElementById("echarts") : document.getElementById("echartsAmount")
                );
                echarts.setOption({
                    title: {},
                    // color: [ "#8bc34a","#ff5722","#8bc34a","#ff5722","#8bc34a","#ff5722","#8bc34a","#ff5722"],
                    color: [ "#ff5722","#8bc34a","#ff5722","#8bc34a","#ff5722"],
                    tooltip: {
                        trigger: "axis"
                    },
                    toolbox: {
                        show: true,
                    },
                    calculable: true,
                    legend: {
                        // data: ["支付宝充值金额", "支付宝充值笔数","拼团成功金额","拼团成功笔数","提现金额","提现笔数","购买会员金额","购买会员笔数"]
                        data: datas,
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList
                    },
                    yAxis: [
                        {
                            type: "value",
                            axisLabel: {
                                margin: 5,
                                formatter: function(value, index) {
                                    if (value >= 10000 && value < 10000000) {
                                    value = value / 10000 + "万";
                                    } else if (value >= 10000000) {
                                    value = value / 100000000 + "万万";
                                    }
                                    return value;
                                }
                            }
                        }
                    ],
                    // series: datas
                    series: function(){
                        var list = []
                        dataList.forEach(item=>{
                            list.push({
                                name: item.name,
                                type: item.type,
                                data: item.data,
                                areaStyle: {},
                                smooth: true,
                            })
                        })
                        return list;
                    }()
                });
                _this.isLoading = false;
            }catch(e){
                _this.$notification['error']({
                    message: '提示',
                    description: e,
                    duration: 8,
                })
            }
        },
    }
}

</script>
<style scoped>
.echartsuser {
    height: 230px;
    width: 100%;
}
#echarts {
    width: 100%;
    height: 100%;
}
#echartsAmount {
    width: 100%;
    height: 100%;
}
</style>